<template>
  <div class="body">
    <nut-navbar @on-click-back="$router.back()" :rightShow="false">团房申请</nut-navbar>
    <div class="container">
      <div class="box m-t-10 m-b-10">
        <nut-textinput class="line b-b" v-model="baseForm.name" label="*活动名称：" placeholder="请填写活动信息栏名称"
                       :clearBtn="true" :disabled="false" :hasBorder="false" />
        <nut-textinput class="line b-b" v-model="baseForm.host" label="*主办方：" placeholder="请填写主办方" :clearBtn="true"
                       :disabled="false" :hasBorder="false" />
        <nut-textinput class="line b-b" v-model="baseForm.personInCharge" label="*负责人：" placeholder="请填写负责人"
                       :clearBtn="true" :disabled="false" :hasBorder="false" />
        <nut-textinput class="line b-b" v-model="baseForm.phone" label="*联系电话：" placeholder="请填写联系电话"
                       :clearBtn="true" :disabled="false" :hasBorder="false" />
        <nut-textinput class="line b-b" v-model="baseForm.other" label="备注说明：" placeholder="备注说明"
                       :clearBtn="true" :disabled="false" :hasBorder="false" />
        <div class="custom">
          <div class="title dis-flex just-con-s-b align-items-c l-h-40">
            <div class="left dis-flex">
              <div>预定信息栏</div>
              <div class="c-999 m-l-5">最多五行</div>
            </div>
            <nut-switch :active.sync="reserveSwitch" size="small"></nut-switch>
          </div>
          <div class="content" v-if="reserveSwitch">
            <div class="line dis-flex just-con-s-b align-items-c m-t-10 l-h-40"
                 v-for="(item, index) in reserveForm" :key="index">
              <div class="input m-r-10">
                <input class="w-100 p-l-5" v-model="item.barName" placeholder="如城市："/>
              </div>
              <div class="input m-r-10">
                <input class="w-100 p-l-5" v-model="item.barValue" placeholder="输入所在城市"/>
              </div>
              <div class="icon l-h-40" v-if="index === 0" @click="reservePlus">
                <i class="plus"></i>
              </div>
              <div class="icon l-h-40" v-else @click="reserveMinus(index)">
                <i class="minus"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="box m-t-10 m-b-10">
        <div class="switch-line dis-flex align-items-c just-con-s-b">
          <div class="left dis-flex align-items-c">
            <div class="input m-r-10 l-h-40">
              <input class="w-100 p-l-5" v-model="costName" placeholder="费用名称"/>
            </div>
            <div class="c-999 f-s-10 line-clamp-2 m-r-5">只需填写标题，用户预定自输入费用</div>
          </div>
          <nut-switch class="flex-sh-0" :active.sync="costSwitch" size="small"></nut-switch>
        </div>
        <div class="custom">
          <div class="title dis-flex just-con-s-b align-items-c l-h-40">
            <div class="left dis-flex">
              <div>其他费用</div>
            </div>
            <nut-switch :active.sync="otherCostSwitch" size="small"></nut-switch>
          </div>
          <div class="content" v-if="otherCostSwitch">
            <div class="line dis-flex just-con-s-b align-items-c m-t-10 l-h-40"
                 v-for="(item, index) in otherCostForm" :key="index">
              <div class="input m-r-10">
                <input class="w-100 p-l-5" v-model="item.feeName" placeholder="费用名称："/>
              </div>
              <div class="input m-r-10">
                <input class="w-100 p-l-5" v-model="item.feeVal" placeholder="费用金额"/>
              </div>
              <div class="input m-r-10">
                <input class="w-100 p-l-5" v-model="item.number " placeholder="人数默认500"/>
              </div>
              <div class="icon l-h-40" v-if="index === 0" @click="otherCostPlus">
                <i class="plus"></i>
              </div>
              <div class="icon l-h-40" v-else @click="otherCostMinus(index)">
                <i class="minus"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="box m-t-10 m-b-10">
        <div class="custom">
          <div class="title dis-flex just-con-s-b align-items-c l-h-40">
            <div class="left dis-flex">
              <div>入住天数</div>
            </div>
            <nut-switch :active.sync="roomSwitch" size="small"></nut-switch>
          </div>
          <div class="calendar-box dis-flex just-con-s-a c-yellow l-h-45" @click="calendarVisible = true">
            <div>入 {{startTime}}</div>
            <div>共 {{days}} 晚</div>
            <div>离 {{endTime}}</div>
          </div>
          <div class="content" v-for="(item, index) in roomForm" :key="index">
            <div class="line dis-flex just-con-s-b align-items-c m-t-10 l-h-40">
              <div class="input m-r-10">
                <input class="w-100 p-l-5" v-model="item.roomTitle" placeholder="请输入房型"/>
              </div>
              <div class="input m-r-10">
                <input class="w-100 p-l-5" v-model="item.teamNum" placeholder="请输入数量"/>
              </div>
              <div class="input m-r-10">
                <input class="w-100 p-l-5" type='number'  v-model="item.teamPrice" placeholder="请输入价格"/>
              </div>
              <div class="icon l-h-40" v-if="index === 0" @click="roomPlus">
                <i class="plus"></i>
              </div>
              <div class="icon l-h-40" v-else @click="roomMinus(index)">
                <i class="minus"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="box m-t-10 m-b-10">
        <div class="custom">
          <div class="title dis-flex just-con-s-b align-items-c l-h-40">
            <div class="left dis-flex">
              <div>*是否提供发票</div>
              <!--<div class="c-999 m-l-5">最多五行</div>-->
            </div>
            <nut-switch :active.sync="baseForm.invoiceSwitch" size="small"></nut-switch>
          </div>
        </div>

      </div>
      <div class="text-center m-b-10 m-t-10 c-999">其他信息请在后台填写</div>
      <div class="bottom-btn dis-block c-fff text-center l-h-40 m-t-10 row" @click="submit">确认申请</div>
      <nut-calendar :is-visible="calendarVisible" type="range" :start-date="now"
                    :end-date="nextMonth" animation="nutSlideUp" @close="switchPicker('calendarVisible')"
                    @choose="setChooseValue">
      </nut-calendar>
    </div>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import moment from 'moment'
  import { addActivityApi } from '../../api/apply'
  import { isEmpty, isTelphone } from '../../utils/rules'

  export default {
    data() {
      return {
        baseForm: {
          name: '',
          host: '',
          personInCharge: '',
          phone: '',
          other: '',
          invoiceSwitch: true,
        },
        reserveSwitch: false,
        reserveForm: [
          {
            barName: '',
            barValue: ''
          }
        ],
        costName: '',
        costSwitch: true,
        otherCostSwitch: true,
        otherCostForm: [
          {
            feeName: '',
            feeVal: '',
            number: ''
          }
        ],
        roomSwitch: true,
        calendarVisible: false,
        now: null,
        nextMonth: null,
        startTime: '',
        endTime: '',
        days: '2',
        roomForm: [
          {
            roomTitle: '',
            teamNum: '',
            teamPrice: ''
          }
        ]
      }
    },
    computed: {
      ...mapGetters([
        'userInfo'
      ])
    },
    mounted () {
      this.now = moment().format('YYYY-MM-DD')
      this.nextMonth = moment().add(7, 'M').format('YYYY-MM-DD')
      this.startTime = moment().format('YYYY-MM-DD')
      this.endTime = moment().add(2, 'd').format('YYYY-MM-DD')
    },
    methods: {
      reservePlus () {
        if (this.reserveForm.length < 5) {
          this.reserveForm.push({
            barName: '',
            barValue: ''
          })
        } else {
          this.$toast.text('最多5行')
        }
      },
      reserveMinus (index) {
        this.reserveForm.splice(index, 1)
      },
      otherCostPlus () {
        this.otherCostForm.push({
          feeName: '',
          feeVal: '',
          number: ''
        })
      },
      otherCostMinus (index) {
        this.otherCostForm.splice(index, 1)
      },
      roomPlus () {
        // if (this.roomForm.length < 5) {
          this.roomForm.push({
            roomTitle: '',
            teamNum: '',
            teamPrice: ''
          })
        // } else {
        //   this.$toast.text('最多5种房型')
        // }
      },
      roomMinus (index) {
        this.roomForm.splice(index, 1)
      },
      async submit () {
        for (let i = 0; i < this.roomForm.length; i++) {
          if(this.roomForm[i].teamPrice == ""){
            return this.$toast.text('请输入入住价格')
          }
        }
        const error = isTelphone(this.baseForm.phone, '请输入正确的电话')
          || isEmpty(this.baseForm.personInCharge, '请输入负责人')
          || isEmpty(this.baseForm.host, '请输入主办方')
          || isEmpty(this.baseForm.name, '请输入活动名称')
          || (this.costSwitch && isEmpty(this.costName, '请输入费用名称'))
        if (error) {
          return this.$toast.text(error)
        }
        if (!((this.otherCostSwitch && this.otherCostForm.length > 0)
          || (this.roomSwitch && this.roomForm.length > 0)
          || (this.costSwitch && this.costName.length > 0))) {
          return this.$toast.text('请输入费用项目或入住订房信息！')
        }
        const tbRoomTeam = this.roomForm.map(v => {
          return Object.assign({}, v, { teamPrice: Number(v.teamPrice) * 100 ,inTime: this.startTime, outTime: this.endTime, nightCount: this.days })
        })
        const tbOtherCharges = this.otherCostForm.map(v => {
          return Object.assign({}, v, {
            feeVal: Number(v.feeVal) * 100,
            number: Number(v.number) > 0 ? Number(v.number) : 500
          })
        })
        const data = {
          activityTitle: this.baseForm.name,
          client: this.baseForm.personInCharge,
          phone: this.baseForm.phone,
          remark: this.baseForm.other,
          salesman: this.userInfo.userId,
          duesName: this.costName,
          isInvoice: this.baseForm.invoiceSwitch ? 1 : 0,
          isOtherfee: this.otherCostSwitch ? 1 : 0,
          isDues: this.costSwitch ? 1 : 0,
          isBar: this.reserveSwitch ? 1 : 0,
          isRoom: this.roomSwitch ? 1 : 0,
          tbOtherCharges,
          tbRoomTeam,
          tbActivityInfoBar: this.reserveForm,
          activityLeader: this.baseForm.host
        }
        try {
          const { flag } = await addActivityApi(data)
          if (flag === '3') {
            this.$toast.text('提交成功')
            this.$router.back()
          } else {
            this.$toast.text('提交失败')
          }
        } catch (e) {
          this.$toast.text('提交失败')
        }
      },
      switchPicker(param) {
        this[`${param}`] = !this[`${param}`]
      },
      setChooseValue(param) {
        // const date3 = [...[param[0][3],param[1][3]]]
        this.startTime = param[0][3]
        this.endTime = param[1][3]
        this.days = (moment(param[1][3]) - moment(param[0][3])) / 1000 / 60 / 60 / 24
      }
    }
  }
</script>

<style scoped lang="scss">
  .body {
    background: #F9F9F9;
    .box {
      padding: 10px;
      box-sizing: border-box;
      background: #ffffff;
      .custom {
        .content {
          .line {
            .input {
              border: 1px #ddd solid;
              input {
                outline: none;
                border: none;
                box-sizing: border-box;
              }
            }
            .icon {
              width: 20px;
              height: 20px;
              i {
                display: inline-block;
                width: 20px;
                height: 20px;
                background-repeat: no-repeat;
                background-size: 100% 100%;
              }
              .plus {
                background-image: url("../../assets/icon/icon-add.png");
              }
              .minus {
                background-image: url("../../assets/icon/icon-reduce.png");
              }
            }
          }
        }
        .calendar-box {
          padding: 0 10px;
          box-sizing: border-box;
          border-radius: 5px;
          background: #1B1B1B;
        }
      }
      .switch-line {
        .left {
          .input {
            border: 1px #ddd solid;
            input {
              outline: none;
              border: none;
              box-sizing: border-box;
            }
          }
        }
      }
    }
    .bottom-btn {
      background: #B29462;
    }
  }
</style>
